<template>
  <div>
    <div class="p-4 lg:p-6">
      <LazyAdminNavBar />
      <h1 class="text-2xl lg:text-3xl font-bold text-gray-800 mb-6">关于我们管理</h1>

      <div class="bg-white rounded-lg shadow p-4 lg:p-6 mb-6 space-y-6">
        <div>
          <h2 class="text-xl font-semibold text-gray-700 mb-4">关于我们</h2>
          <textarea v-model="aboutData.title" rows="4"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            placeholder="输入使命愿景内容"></textarea>
          <input v-model="aboutData.logo" type="text"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            placeholder="logo链接">
        </div>

        <div>
          <h2 class="text-xl font-semibold text-gray-700 mb-4">企业简介</h2>
          <textarea v-model="aboutData.intro" rows="4"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            placeholder="输入发展历程内容"></textarea>
        </div>

        <div v-for="(titleKey, index) in aboutTitle" :key="index">
          <h2 class="text-xl font-semibold text-gray-700 mb-4">{{ getSectionTitle(titleKey) }}</h2>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <div v-for="(item, itemIndex) in getSectionItems(titleKey)" :key="itemIndex"
              class="border border-gray-200 rounded-lg p-4">
              <div class="flex items-center mb-3">
                <input v-model="item.title" type="text"
                  class="flex-1 px-3 py-1 border-b border-gray-300 focus:outline-none focus:border-blue-500"
                  placeholder="标题">
              </div>
              <input v-if="item.textColor !== undefined" v-model="item.textColor" type="text"
                class="w-full px-3 py-1 border-b border-gray-300 focus:outline-none focus:border-blue-500 mb-2"
                placeholder="文字颜色">
              <textarea v-model="item.content" rows="2"
                class="w-full px-3 py-1 border border-gray-300 rounded focus:outline-none focus:border-blue-500"
                placeholder="内容"></textarea>
              <button @click="removeItem(titleKey, itemIndex)"
                class="mt-2 text-sm text-red-500 hover:text-red-700 flex items-center">
                <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
                删除
              </button>
            </div>
          </div>
          <button @click="addItem(titleKey)" class="mt-4 flex items-center text-blue-600 hover:text-blue-800">
            <svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            添加
          </button>
        </div>
      </div>

      <div class="flex justify-end">
        <button @click="saveChanges"
          class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
          保存更改
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import adminNavBar from '../../components/admin/admin-nav-bar.vue'
const { getAboutData, updateAboutData } = useAboutApi()
import type { AboutUs, AboutUsVisionMission, AboutUsMilestone, AboutUsCulture, AboutItem } from '~/types/about';

definePageMeta({
  layout: 'minimal',
  showHeader: false
});
// 定义响应式数据
const aboutData = ref<AboutUs>({
  title: '',
  intro: '',
  cultures: [],
  milestones: [],
  visionMission: []
});

// 定义可遍历的section keys
const aboutTitle = ref<Array<keyof AboutUs>>(['cultures', 'milestones', 'visionMission']);

// 获取section标题
const getSectionTitle = (key: keyof AboutUs): string => {
  const titles: Record<keyof AboutUs, string> = {
    cultures: '企业文化',
    milestones: '里程碑',
    visionMission: '愿景与使命',
    title: '标题',
    intro: '简介',
    logo: ''
  };
  return titles[key];
};

// 安全获取section items
const getSectionItems = (key: keyof AboutUs): AboutItem[] => {
  const items = aboutData.value[key];
  if (Array.isArray(items)) {
    return items;
  }
  return [];
};
// 添加项目
const addItem = (section: keyof AboutUs) => {
  if (aboutData.value[section]) {
    const newItem = {
      section_type: section === 'cultures' ? 'culture' :
        section === 'milestones' ? 'milestone' : 'vision_mission',
      title: '',
      content: '',
      textColor: '',
      iconClass: '',
      bgColor: ''
    };

    (aboutData.value[section] as any[]).push(newItem);
  }
};

// 删除项目
const removeItem = (section: keyof AboutUs, index: number) => {
  if (aboutData.value[section]) {
    (aboutData.value[section] as any[]).splice(index, 1);
  }
};

// 保存更改
const saveChanges = async () => {
  try {
    await updateAboutData(aboutData.value);
    // 可以添加成功提示
  } catch (error) {
    console.error('保存失败:', error);
    // 可以添加错误提示
  }
};

// 初始化数据
onMounted(async () => {
  try {
    const data = await getAboutData();
    aboutData.value = {
      logo: data?.logo || '',
      title: data?.title || '',
      intro: data?.intro || '',
      cultures: data?.cultures || [],
      milestones: data?.milestones || [],
      visionMission: data?.visionMission || []
    };
  } catch (error) {
    console.error("初始化数据出错:", error);
  }
});
</script>